<template>
    <div class="container" ref="container"
        :style="{ backgroundImage: `url('${imgList[index]}')`, backgroundPositionX: num + '%' }">
        <audio src="/比良彩那 - Nameless Town.mp3" loop ref="audio"></audio>
        <div class="title">
            DISCOMFORT
        </div>
        <div class="btn" @click="emit('start')">开始游戏</div>
        <div class="btn" @click="closeAudio">音乐{{ audioNo ? '关闭' : '打开' }}</div>
        <div class="btn" @click="openFullscreen" v-if="!isfullscreen">全屏</div>
        <div class="btn" @click="closeFullscreen" v-else>退出全屏</div>
        <div class="btn" @click="showAbout = true">关于</div>
        <div class="about" v-show="showAbout">
            <div class="close" @click="closeAbout">X</div>
            <div class="title">
                关于
            </div>
            <div class="content">
                <p>我是作者,该游戏采用前端 Vue3+PixiJS 开发,免费开源,供所有人学习使用或游玩,喜欢请点个关注</p>
                <p>CSDN博客: https://blog.csdn.net/m0_61279136?type=blog</p>
                <p>哔哩哔哩: https://space.bilibili.com/35310250?spm_id_from=333.1007.0.0</p>
                <p>项目源码: https://gitee.com/violet_wmtxdy/original-game---discomfort</p>
                <p>背景音乐:比良彩那 - Nameless Town、井内啓二 - 急駛の冒険者</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const emit = defineEmits(['start'])

const container = ref()

const index = ref(0)
const num = ref(0)
const imgList = [
    '/public/map/PNG/game_background_1/game_background_1.png',
    '/public/map/PNG/game_background_2/game_background_2.png',
    '/public/map/PNG/game_background_3/game_background_3.png',
    '/public/map/PNG/game_background_4/game_background_4.png',
]

const audio = ref()

const audioNo = ref(true)
const showAbout = ref(true)

function closeAudio() {
    audioNo.value = !audioNo.value
    if (audioNo.value) {
        audio.value.play()
    } else {
        audio.value.pause()
    }
}

function closeAbout() {
    showAbout.value = false;
    audio.value.play()
    audioNo.value = true
}

const isfullscreen = ref(false)

function openFullscreen() {
    if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) { // Firefox
        document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) { // Chrome and Safari
        document.documentElement.webkitRequestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) { // IE/Edge
        document.documentElement.msRequestFullscreen();
    }
    isfullscreen.value = true;
}
function closeFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { // Firefox
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { // Chrome and Safari
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { // IE/Edge
        document.msExitFullscreen();
    }
    isfullscreen.value = false;
}

onMounted(() => {
    container.value.style.width = window.innerWidth + 'px'
    container.value.style.height = window.innerHeight + 'px'

    setInterval(() => {
        num.value += 1
        if (num.value == 100) {
            num.value = 0
            index.value += 1
            if (index.value == 4) {
                index.value = 0
            }
        }
    }, 50)
    audio.value.volume = 0.3
})

window.addEventListener('resize', () => {
    container.value.style.width = window.innerWidth + 'px'
    container.value.style.height = window.innerHeight + 'px'
})

</script>

<style scoped>
.container {
    background-size: 150% 100%;
    /* filter: blur(3px); */
    padding-top: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: -1;
}

.container>.title {
    font-size: 50px;
    text-align: center;
    z-index: 999;
    z-index: 1;
    margin-bottom: 30px;
}

.container .btn {
    padding: 5px 20px;
    border-radius: 10px;
    font-size: 30px;
    text-align: center;
    border: 3px solid black;
    width: 200px;
    margin: 10px 0;
    cursor: pointer;
}

.container .about {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    border: 3px solid white;
    border-radius: 10px;
    padding: 10px;
    background-color: black;
    color: white;
}

.container .about .title {
    position: absolute;
    left: 10px;
    font-size: 20px;
}

.container .about .close {
    position: absolute;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

.container .about .content {
    margin-top: 30px;
    line-height: 25px;
}
</style>
